import { html, NE } from 'nvagir'
import { delPlanModal } from '../../components/DelModal'
import { editPlanModal } from '../../components/PlanModal'

const PlanBar = (addPlan: VoidFunction) => {
  const { el } = html`
    <div class="bar">
      <h1>学习计划</h1>
      <i class="iconfont" n@click=${addPlan}>&#xe60c;</i>
    </div>
  `
  // NE => 子组件
  const component: NE<'PlanBar'> = { name: 'PlanBar', el }
  return component
}

const Tag = (content: string) => {
  const { el } = html` <span class="tag">${content}</span> `
  const component: NE<'Tag'> = { name: 'Tag', el }
  return component
}

const PlanItem = (
  idx: number,
  plan: Plan,
  active: boolean,
  changeActive: (t: number) => void,
  clickPlanMobile: VoidFunction,
  del: (p: Plan) => void,
  edit: (n: Plan, o: Plan) => void,
) => {
  const delPlan = () => {
    delPlanModal({
      onClose() {
        console.log('close')
      },
      onConfirm() {
        del(plan)
      },
    })
  }

  const editPlan = () => {
    const oldPlan = plan
    editPlanModal({
      plan: plan,
      onClose() {},
      onConfirm(plan) {
        plan.details = oldPlan.details
        edit(oldPlan, plan)
      },
    })
  }

  const { el } = html`
    <li
      class="plan ${active ? 'active' : ''}"
      n@click=${() => {
        changeActive(idx)
        if (window.innerWidth < 768) {
          clickPlanMobile()
        }
      }}
    >
      <h1>
        ${plan.title}
        <span class="date"> ${plan.dueDate} </span>
      </h1>
      <p class="comment">${plan.comment}</p>
      <div class="extra">
        <div class="extra-left">${plan.tags.map(content => Tag(content))}</div>
        <div class="extra-right event-op">
          <span
            class="edit"
            n@click=${event => {
              console.log('in')
              event.cancelBubble = true
              editPlan()
            }}
          >
            <i class="iconfont">&#xe73c;</i>
          </span>
          <span
            class="del"
            n@click=${event => {
              event.cancelBubble = true
              delPlan()
            }}
          >
            <i class="iconfont">&#xe620;</i>
          </span>
        </div>
      </div>
    </li>
  `
  const component: NE<'PlanItem'> = { name: 'PlanItem', el }
  return component
}

const PlanContainer = (
  plans: Array<Plan>,
  activeIdx: number,
  changeActive: (t: number) => void,
  clickPlanMobile: VoidFunction,
  delPlan: (p: Plan) => void,
  editPlan: (o: Plan, n: Plan) => void,
) => {
  const { el } = html<{
    container: HTMLElement
  }>`
    <ul class="main">
      ${plans.map((plan, idx) =>
        PlanItem(
          idx,
          plan,
          idx == activeIdx,
          changeActive,
          clickPlanMobile,
          delPlan,
          editPlan,
        ),
      )}
    </ul>
  `
  const component: NE<'PlanContainer'> = { name: 'PlanContainer', el }
  return component
}

const StudyPlanLeft = (
  list: Array<Plan>,
  activeIdx: number,
  changeActive: (t: number) => void,
  clickPlanMobile: VoidFunction,
  delPlan: (p: Plan) => void,
  addPlan: VoidFunction,
  editPlan: (o: Plan, n: Plan) => void,
) => {
  const { el } = html`
    <div class="study-plan-left">
      ${PlanBar(addPlan)}
      ${PlanContainer(
        list,
        activeIdx,
        changeActive,
        clickPlanMobile,
        delPlan,
        editPlan,
      )}
    </div>
  `
  const component: NE<'StudyPlanLeft'> = { name: 'StudyPlanLeft', el }
  return component
}

export default StudyPlanLeft
